<?php
/**
 * Created by PhpStorm.
 * User: zhanglu
 * Date: 2019/4/8
 * Time: 1:57 PM
 */

$per_url = Yii::$app->params['imgurl'];
$setting = Yii::$app->setting;
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="keywords" content="<?=$setting->get('site_keyword')?>">
    <meta name="Description" content="<?=$setting->get('site_description')?>">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title><?=$setting->get('site_title')?></title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            padding:0px;
            margin:0px;
            background:#fff;
        }
        .sec-one{display: flex;align-items: center;text-align: center;}
        .mytab{flex:1;display: block;color:#999;padding:15px;border-bottom:1px solid rgba(153, 153, 153, 0.3);}
        .mytab.active{flex:1;display: block;color:#333;border-bottom:1px solid #333}
        .book-item{padding:15px;border-bottom:1px solid rgba(153, 153, 153, 0.3);display:flex;align-items: center}
        .book-item .thumb{width:100px;flex:1;}
        .book-item .mycontent{padding-left:20px;flex:3;}
        .book-item .mycontent .title{font-size:24px;color:#333}
        .book-item .mycontent .desc{font-size:16px;font-weight:300;color:#333;text-align: justify;}
        .booklist a{text-decoration: none;}
        .sec-one a{text-decoration: none;}

        .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
            background-color: #f88b8f;
            border-color: #f88b8f;
        }

        .pagination > li > a, .pagination > li > span {
            color: #f88b8f;
            border: 1px solid #f88b8f;
        }

        .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
            border-color: #f88b8f;
        }
        .qrcode-modal{display:none;width:100%;height:100%;position: fixed;z-index:999;top:0px;left:0px;background: rgba(0,0,0,.6)}
        .qrcode-download-modal{display:none;width:100%;height:100%;position: fixed;z-index:999;top:0px;left:0px;background: rgba(0,0,0,.6)}
    </style>

</head>
<body>
<div class="page-book-catalog" style="padding:0px 20%">
    <div class="header" style="padding:0px 50px;display: flex;align-items: center;height:80px;width:100%;background: #f88b8f;position: fixed;top:0px;left:0px">
      <div style="flex: 1;">
          <img src="/img/logo.png" style="width:60px" alt="">
      </div>
      <div style="flex: 1;text-align: right">
          <a class="download" href="javascript:void(0);" data-url="http://www.51manshe.com/app/android.apk" style="font-size: 16px;color:#fff;font-weight: 500;">Android 下载</a>
      </div>
    </div>
    <div style="height:80px;width:100%;"></div>
    <div class="sec-one">
        <a href="/?tab=mun" class="mytab <?=($tab == 'num')?'active':''?>">
            人气榜
        </a>
        <a href="/?tab=like" class="mytab <?=($tab == 'like')?'active':''?>">
            收藏榜
        </a>
    </div>

    <div class="booklist">
        <?php foreach($list as $k=>$v){?>
            <a style="text-decoration: none;" class="bookitem" href="javascript:;" data-url="http://www.51manshe.com/book-item/<?=$v['number']?>.html">
                <div class="book-item">
                    <div class="thumb">
                        <img src="<?=$per_url . $v['thumb_img']?>" alt="<?=$v['front_title']?>" style="width:80%;border-radius: 6px;box-shadow: 0 0 2px #999">
                    </div>
                    <div class="mycontent">
                        <h4 class="title"><?=$v['front_title']?></h4>
                        <p class="desc" style="line-height: 2"><?=$v['intro']?></p>
                        <p class="remark" style="text-align: right;font-size: 14px;margin-top: 30px">
                            <span style="padding: 6px 20px;border:1px solid #ff5754;border-radius: 6px;color:#ff5754;margin-right: 15px;"><?=$v['click_num']?> 人气</span>
                            <span style="padding: 6px 20px;border:1px solid #333;border-radius: 6px;color:#333"><?=$v['zan_num']?> 收藏</span>
                        </p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </a>
            <a href="http://www.51manshe.com/news/<?=$v['number']?>.html" style="display: none;"><?=$v['front_title']?></a>
            <div style="display: none"><a href="http://51manshe.com/book-item/<?=$v['number']?>.html"><?=$v['front_title']?></a></div>
        <?php }?>
    </div>

    <div class="text-center"> <?= \yii\widgets\LinkPager::widget(['pagination' => $pages,
            'firstPageLabel'=>"首页",
            'prevPageLabel'=>'上一页',
            'nextPageLabel'=>'下一页',
            'lastPageLabel'=>'末页',
        ]);
        ?></div>

    <div class="qrcode-modal">
        <div style="position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)">
            <div id="qrcode" style="box-shadow: 0 0 6px #333"></div>
            <p style="color:#fff;font-size: 16px;text-align: center;margin-top: 15px;">请使用手机浏览器或微信打开</p>
            <p style="color:#fff;font-size: 16px;text-align: center;margin-top: 15px;">Android体验更+ （ 右上角下载 ）</p>
        </div>
    </div>

    <div class="qrcode-download-modal">
        <div style="position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)" >
            <div id="qrcode-download" style="box-shadow: 0 0 6px #333"></div>
            <p style="color:#fff;font-size: 16px;text-align: center;margin-top: 15px;">Android下载 请使用手机浏览器扫码</p>
        </div>
    </div>



</div>
<div style="display: none"><a href="/sitemap.html">网站地图</a></div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>

    var decviceWidth=$(window).width();
    var sw = decviceWidth - 110;
    $('.mycontent').css('width',sw + 'px');

    $('.bookitem').click(function(){
        $('.qrcode-modal').fadeIn(500);
        var url = $(this).data('url');
        console.log(url)
        $('#qrcode').qrcode(url);
    });

    $('.download').click(function(){
        $('.qrcode-download-modal').fadeIn(500);
        var url = $(this).data('url');
        console.log(url)
        $('#qrcode-download').qrcode(url);
    });

    $('.qrcode-modal').click(function(){
        $('.qrcode-modal').fadeOut(500);
        $('#qrcode').html('')
    });

    $('.qrcode-download-modal').click(function(){
        $('.qrcode-download-modal').fadeOut(500);
        $('#qrcode-download').html('')
    });

</script>
